<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>DOM事件类</title>
	<link rel="stylesheet" href="">
</head>
<body>
	<div id="ev">
		<style>
			#ev{
				width:200px;
				height:150px;
				background: orange;
				text-align: center;
				line-height: 150px;
				color:#fff;
				font-size:26px;
			}
		</style>
		目标元素
	</div>
	<script>
		var ev=document.getElementById("ev");
		window.addEventListener("click",function(){
			console.log("window capture!")
		},true)
		document.body.addEventListener("click",function(){
			console.log("body capture!")
		},true)
		ev.addEventListener("click",function(){
			console.log("ev capture!")
		},true)
		document.addEventListener("click",function(){
			console.log("document capture!")
		},true)
		document.documentElement.addEventListener("click",function(){
			console.log("html capture!")
		},true)
		

		//自定义事件
		var eve = new Event("test");
		ev.addEventListener("test",function(){
			console.log("test dispatch!")
		},true);
		setTimeout(function(){
			ev.dispatchEvent(eve);
		},2000)

	</script>
</body>
</html>